<template>
	<view class="container-main">
		<ikz-loading :css-data="loading_css"></ikz-loading>
		<!-- 搜索框 -->
		<view class="search-box">
			<!-- <view class="navbar" ></view> -->
			<view class="ctn">
				<view class="hx-search-box" @click="goSearch">
					<image class="search-icon" src="/static/supermarket/index/icon-search.png" mode="aspectFit"></image>
					<text>请输入搜索关键词搜索店铺</text>
				</view>
			</view>
		</view>
		<!-- 内容区 -->
		<view class="main-box">
			<!-- 导航菜单 -->
			<view class="menu-box">
				<swiper class="ikz-swiper"  :style="{ height: swiperHeight + 'px' }" :duration="800" @change="imgChange">
					<swiper-item v-for="(list, index) in menuList" :key="index">
						<view class="container swiper-box">
							<view class="item-box" v-for="(item,i) in list" :key="i" @click="toList(item.id,item.name)">
								<image :src="adminImgPath+item.image" mode="aspectFill"></image>
								<view class="tit">
									{{item.name}}
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="ikz-swiper-dots flex">
					<view class="ikz-dots" :class="currentIndex == index ? 'ikz-cur' : ''" v-for="(item, index) in menuList.length"
						:key="index">
					</view>
				</view>
			</view>
			<!-- 推荐商家 -->
			<view class="index-title container" v-if="recommend_data.length">推荐商家</view>
			<view class="recommend-box container" v-if="recommend_data.length">
				<scroll-view scroll-x class="scroll-nav" @scrolltolower="scrolltolower">
					<view @click="toStore(item.id)" class="column wbcentre" v-for="(item,index) in recommend_data" :key="index">
						<image class="column-bg" :src="adminImgPath + item.logo_image" mode="aspectFill"></image>
						<view class="column-cont">
							<view class="tag">
								<view class="name">{{item.name}}</view>
								<view class="time-title">营业时间：</view>
								<view class="time-cont">{{item.business_hours_start_times}} | {{item.business_hours_end_times}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 商家列表 -->
			<view class="index-title container">商家列表</view>
			<view class="store-box">
				<store-list ref="storeList"></store-list>
			</view>
			<view class="footzw"></view>
		</view>
		<!-- 返回主页 -->
		<!-- <view class="gohome" @click="goHome()">
			<image src="/static/login/tohome.png" mode="aspectFit"></image>
		</view> -->
		<!-- 缺省 -->
		<view class="default-height"></view>
		<ikz-tabbar :show-data="tabbar_Data"></ikz-tabbar>
	</view>
</template>

<script>
	import ikzLoading from '@/pages/Component/Public/Loading/loading.vue';
	import storeList from '@/pages/Component/supermarket/component/store/list.vue'
	import ikzTabbar from '@/pages/Component/Public/tab-bar/tab-bar.vue';
	import ikz from '@/pages/Common/tools.js';
	var app = getApp();
	const screenHeight = uni.getSystemInfoSync().screenHeight;
	export default {
		components: {
			ikzLoading,
			storeList,
			ikzTabbar
		},
		onPageScroll(e) {
			let that = this;
			if (e.scrollTop > 10) {
				let view = uni.createSelectorQuery().select(".search-box");
				view.fields({
					rect: true
				}, res => {
					if (res.top == 0) {
						that.GDHEAD = 1;
					} else {
						that.GDHEAD = 0;
					}
				}).exec();
			}

		},
		data() {
			return {
				tabbar_Data: {
					type: 0,
					list: [
						{
							title: "首页",
							url: "/pages/Component/supermarket/Program/index/index",
							iconPath: "/static/supermarket/tabbar/tab_home.png",
							selectedIconPath: "/static/supermarket/tabbar/tab_home_sel.png",
							status: 1,
						},
						{
							title: "我的",
							url: "/pages/Component/supermarket/Program/user/index",
							iconPath: "/static/supermarket/tabbar/tab_user.png",
							selectedIconPath: "/static/supermarket/tabbar/tab_user_sel.png",
							status: 1,
						},
					]
				},
				loading_css: {
					display: 'flex'
				},
				MPPR: 0,
				GDHEAD: 0,
				adminImgPath: app.globalData.adminImgPath,
				menuTotal: 0,
				menuList: [],
				recommend_data: [],
				swiperHeight: 0,
				currentIndex: 0,
				remPage: 1,
				remHasMore: false,
				page: 1
			}
		},
		onLoad() {
			// #ifdef MP
			//小程序下空出胶囊距离
			let m = uni.getMenuButtonBoundingClientRect();
			this.MPPR = m.width + 8
			// #endif
			this.getInfo(res => {
				this.loading_css.display = 'none';
			})
			this.$refs.storeList.getStoreList()
			this.getRecommend()
		},
		onShareAppMessage() {
			return {
				title: app.globalData.share_info.share_title,
				path: '/xyb/pages/Component/supermarket/Program/index/index',
				imageUrl: app.globalData.share_info.share_img,
			}
		},
		onReachBottom() {
			this.$refs.storeList.onBottom()
		},
		onPullDownRefresh() {
			this.getInfo(res => {
				uni.stopPullDownRefresh();
			})
			this.$refs.storeList.getStoreList()
			this.getRecommend()
		},
		methods: {
			// 返回主页
			goHome() {
				uni.switchTab({
					url: "/pages/Home/index"
				})
			},
			// 轮播图切换
			imgChange(e) {
				this.currentIndex = e.detail.current;
				//动态设置swiper的高度，使用nextTick延时设置
				this.$nextTick(() => {
					this.setSwiperHeight();
				});
			},
			//动态设置swiper的高度
			setSwiperHeight() {
				let query = uni.createSelectorQuery().in(this);
				query.selectAll(".swiper-box").boundingClientRect();
				query.exec((res) => {
					this.swiperHeight = res[0][this.currentIndex].height;
				})
			},
			// 跳转商品详情
			toStore(id) {
				uni.navigateTo({
					url: '/pages/Component/supermarket/Program/store/index?id='+id
				})
			},
			//搜索
			goSearch() {
				uni.navigateTo({
					url: '/pages/Component/supermarket/Program/search/search'
				})
			},
			// 跳转店铺列表
			toList(id,tit) {
				uni.navigateTo({
					url: '/pages/Component/supermarket/Program/search/list?id='+id+'&title='+tit
				})
			},
			// 获取首页信息
			getInfo(fn) {
				var path = '/xyb/supermarket/index/index';
				ikz.requestPost(path, {}, res => {
					if (res.data.code) {
						var newArr = []
						for(let i=0;i<res.data.data.supermarket_category_list.length;i+=8){
							newArr.push(res.data.data.supermarket_category_list.slice(i,i+8));
						}
						this.menuList = newArr
						this.$nextTick(() => {
							this.setSwiperHeight();
						});
					} else {
						uni.showModal({
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function(res) {}
						});
					}
					fn()
				})
			},
			// 获取推荐商家
			getRecommend() {
				var path = '/xyb/supermarket/index/businsess_list';
				var data = {
					recommend: 1,
					page: this.remPage,
					limit: 10
				};
				ikz.requestPost(path, data, res => {
					if (res.data.code) {
						let list = res.data.data.data
						this.remHasMore = this.remPage<res.data.data.total/10?true:false
						this.recommend_data = this.remPage === 1 ? list : [...this.recommend_data, ...list];
					} else {
						uni.showModal({
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function(res) {}
						});
					}
				})
			},
			scrolltolower(e) {
				if(this.remHasMore) {
					this.remPage += 1
					this.getRecommend()
				}
			}
		}
	}
</script>

<style lang="scss">
	.container-main {
		background: #f8f8f8;
		min-height: 100vh;
	}
	
	.gohome {
		position: fixed;
		top: 60%;
		right: 36rpx;
		z-index: 100;
		
		image {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.b-b {
		position: relative;
	}

	.b-b:after,
	.b-t:after {
		position: absolute;
		z-index: 3;
		left: 0;
		right: 0;
		height: 0;
		content: '';
		transform: scaleY(.5);
		border-bottom: 1px solid #E4E7ED;
	}

	.b-b:after {
		bottom: 0;
	}

	.b-t:after {
		top: 0;
	}

	.container {
		margin: 0 15px;
	}

	.margin-top {
		margin-top: 12px;
	}

	.head-box {
		padding: 14px 0;
		/* #ifdef MP */
		padding-top: 2px;
		/* #endif */
		position: relative;
		z-index: 3;

		.navbar {
			position: sticky;
			top: 0;
			height: var(--status-bar-height);
		}

		.container {
			height: 45rpx;
			position: relative;

			.home-logo {
				width: 45rpx;
				height: 45rpx;
				position: absolute;
				top: 0;
				left: 0;
			}

			.navbar-title {
				font-size: 29rpx;
				line-height: 45rpx;
				text-align: center;
				color: #333333;
			}
		}

	}

	.search-box {
		/* #ifndef APP-PLUS-NVUE */
		position: -webkit-sticky;
		/* #endif */
		position: sticky;
		top: var(--window-top);
		z-index: 100;
		background: #f8f8f8;

		.ctn {
			padding: 15px 15px 12px;

			.hx-search-box {
				border-radius: 40px;
				padding: 0 15px;
				height: 34px;
				display: flex;
				align-items: center;
				line-height: 44rpx;
				background-color: #eeeeee;
				flex: 1;
				color: #888888;
				font-size: 14px;

				.search-icon {
					width: 28rpx;
					height: 28rpx;
					margin-right: 16rpx;
				}
			}
		}
	}

	.main-box {
		background: #f8f8f8;
	}

	.QZBG {
		background: #ffffff;
		box-shadow: 0 1px 6px #ccc;

		.navbar {
			height: var(--status-bar-height);
		}

		.ctn {
			background: #ffffff;
			/* #ifdef MP */
			padding-top: 0px;
			/* #endif */
		}
	}

	.hot-box {

		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;

		.item {
			margin-right: 12px;
			background-color: #EEEEEE;
			color: #666666;
			font-size: 12px;
			border-radius: 20px;
			padding: 2px 6px;
			margin-bottom: 8px;
		}

		.item:last-child {
			margin-right: 0;
		}
	}

	.bannerimg-box {
		border-bottom-left-radius: 10upx;
		border-bottom-right-radius: 10upx;
		padding-top: 22rpx 0;

		.image {
			width: 100%;
		}
	}

	.menu-box {
		position: relative;
		padding-bottom: 25rpx;
		border-radius: 15rpx;
		background: #ffffff;
		// margin-bottom: 24rpx;
		
		.swiper-box {
			display: flex;
			flex-direction: row;
			padding: 24rpx 0;
			flex-wrap: wrap;
			
			.item-box {
				margin-top: 24rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 25%;
		
				image {
					width: 105rpx;
					height: 105rpx;
					border-radius: 16rpx;
				}
		
				.tit {
					text-align: center;
					width: 100%;
					font-size: 28rpx;
					margin-top: 12rpx;
					color: #333333;
					padding: 4rpx 0;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
		
		.ikz-swiper-dots {
			position: absolute;
			left: 50%;
			bottom: 20rpx;
			transform: translateX(-50%);
			z-index: 1;
			display: flex;
			
			.ikz-dots {
				width: 32rpx;
				height: 6rpx;
				background: #cacaca;
				margin-right: 15rpx;
			
				&.ikz-cur {
					background: #fed476;
				}
			}
			
			.ikz-dots:last-child {
				margin-right: 0;
			}
		}
	}

	.index-title {
		font-weight: 600;
		font-size: 30rpx;
		line-height: 40rpx;
		color: #333333;
		padding-top: 22rpx;
	}

	.recommend-box {
		margin-top: 22rpx;

		.scroll-nav {
			/* #ifndef APP-PLUS-NVUE */
			position: -webkit-sticky;
			/* #endif */
			position: sticky;
			top: var(--window-top);
			z-index: 1;
			flex-direction: row;
			white-space: nowrap;
			overflow-x: auto;
			width: 100%;

			.column {
				width: 42%;
				height: 255rpx;
				display: inline-block;
				margin-left: 4%;
				border-radius: 10rpx;
				overflow: hidden;
				position: relative;

				&:first-child {
					margin-left: 0;
				}

				.column-bg {
					width: 100%;
					height: 100%;
				}

				.column-cont {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);

					.tag {
						position: absolute;
						left: 0;
						bottom: 0;
						padding: 15rpx;
						width: 100%;
						box-sizing: border-box;

						.name {
							font-weight: 600;
							font-size: 30rpx;
							line-height: 40rpx;
							color: #FFFFFF;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.time-title {
							margin-top: 8rpx;
							font-weight: 400;
							font-size: 22rpx;
							line-height: 25rpx;
							color: #FFFFFF;
						}

						.time-cont {
							margin-top: 10rpx;
							font-weight: 400;
							font-size: 22rpx;
							line-height: 25rpx;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}

	.sort-box {
		display: flex;
		flex-direction: row;
		margin-top: 12px;

		.item-box {

			margin-right: 16px;

			.tit {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 12px;
				color: #333333;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.active {
				//color: #111111;
				font-weight: bold;
			}
		}
	}

	.footzw {
		/* #ifdef H5*/
		height: 50px;
		/* #endif */
	}
</style>
